<template>
	<view class="orders" :class="orderList.length == 0 ? 'empty' : ''">
		<block v-if="orderList.length > 0">
			<u-list @scrolltolower="scrolltolower">
				<u-list-item v-for="(item, index) in orderList" :key="index" :class="item.orderState == 3 ? 'qx' : ''"
					@tap.prevent="toDetails(item)">
					<view class="top">
						<view class="left">
							<image src="@/static/my/cp_zs.png" mode=""></image>
							<text :class="item.orderState == 3 ? 'qx' : ''">船票+住宿</text>
						</view>
						<view class="right">
							<block v-if="item.orderState==0&&item.djsTime">
								<uCountDown @finish="finish(item)" :djsTime="item.djsTime" />
							</block>
							<block v-else>
								<text
									:class="oscConfig[item.orderState]||'textColor999'">{{ ocfg[item.orderState] }}</text>
							</block>
						</view>
					</view>
					<view class="content">
						<view class="title">{{ item.jointName }}</view>
						<view class="date">
							<text>{{ item.arriveDate }}</text>
							<text>至</text>
							<text>{{ item.leaveDate }}</text>
						</view>
						<view class="room_price">
							<view class="room">
								<text>{{ item.num }}晚{{ item.checkInRooms }}间</text>
								<text>{{ item.houseBaseName }}</text>
							</view>
							<view class="price">
								<text :class="item.orderState == 3 ? 'qx' : ''">¥{{ item.realityPay }}</text>
							</view>
						</view>
					</view>
					<view class="btns">
						<view @tap.stop="deleteOrder(item)" v-if="item.orderState == 3 || item.orderState == 4">删除订单
						</view>
						<view @tap.stop="refundTicket(item)" v-if="item.orderState == 1 || item.orderState == 2">退票退款
						</view>
						<view @tap.stop="deleteOrder(item)" v-if="item.orderState == 6 || item.orderState == 7">删除订单
						</view>
						<!-- <view @tap.stop="invoice(item)" v-if="item.orderState==1||item.orderState==2">发票/报销</view> -->
						<view @tap.stop="cancelOrder(item)" v-if="item.orderState == 0">取消订单</view>
						<view @tap.stop="toPay(item)" v-if="item.orderState == 0"
							style="color: #FFFFFF; background-color: #FF4141;">
							去支付</view>
						<view @tap.stop="againReserve(item)" v-if="item.orderState > 0">再次预订</view>
						<!-- <view @tap.stop="toEvaluate(item)" v-if="item.orderState == 20">去评价</view> -->
					</view>
				</u-list-item>
			</u-list>
		</block>

		<block v-else>
			<NoData style="margin:80% auto ;" />
		</block>

		<!-- 删除弹框 -->
		<u-modal :show="showdelete" :title="title" :content='contented' showCancelButton="true" confirmText='确定'
			confirmColor='#007A69' @confirm="confirmed" @cancel='cancel'></u-modal>

	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		data() {
			return {
				mysearch: '',
				orderList: [],
				oscConfig: {
					0: 'textColor000',
					1: 'textColor333'
				},
				ocfg: this.$ocfg,
				pageIndex: 1,
				pageCount: 10,
				isOver: false,
				orderState: '',
				disScroll: false,
				showdelete: false,
				title: '温馨提示',
				contented: '您确定要删除吗？确定删除将不可撤回！',
				delId: null

			}
		},
		methods: {
			scrolltolower() {
				if (this.isOver) return
				this.getList();
			},
			init() {
				this.pageIndex = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			search(keyword) {
				this.mysearch = keyword;
				this.pageIndex = 1;
				this.isOver = false;
				this.orderList = [];
				this.getList();
			},
			getList() {
				let that = this;
				this.$api.get('/api/shipHotel/getShPersonalOrderList', {
					openId: JSON.parse(uni.getStorageSync('userInfo')).openId,
					orderState: this.orderState,
					page: this.pageIndex,
					limit: this.pageCount,
					searchBox: this.mysearch,
				}).then(res => {
					if (res.data.code === 0) {
						that.pageIndex++;
						let {
							list,
							total
						} = res.data.data;
						if (that.orderList.length + list.length > total || list.length == 0) return that.isOver =
							true;
						that.orderList = [...that.orderList, ...list];
						that.orderList.forEach((d, i) => {
							d.leaveDate = new Date(d.leaveDate).Format('yyyy-MM-dd');
							d.arriveDate = new Date(d.arriveDate).Format('yyyy-MM-dd');
							if (d.orderState == 0) {
								let diffMS = Date.parse(new Date(d.expireTime)) - Date.parse(new Date());
								if (diffMS > 1000) d.djsTime = diffMS - 1000; //提前一秒，便于取消刷新
							}
						})
					} else that.$showToast(res.data.msg);
				})
			},
			changeStatus(index) {
				if (index === 0) this.orderState = '';
				else if (index === 1) this.orderState = '0'
				else if (index === 2) this.orderState = '1,2';
				else if (index === 3) this.orderState = '20';
				else this.orderState = '-2,-1,3,4,5,6,7,8,9,10,11';
				this.init();
			},
			//删除
			deleteOrder(item) {
				this.delId = item.id
				this.showdelete = true
			},
			// 确定删除
			confirmed() {
				let id = this.delId
				this.$api.del(`/api/shipHotel/delPersonalOrder/${id}`).then((res) => {
					if (res.data.code == 0) {
						this.showdelete = false
						this.init();
					} else {
						this.$showModal(res.data.msg);
						this.showdelete = false
						this.init();
					}
				})
			},
			cancel() {
				this.showdelete = false
			},
			//再次预订
			againReserve(item) {
				wx.setStorageSync('detailsList', item);
				uni.navigateTo({
					url: '/pagesTrip/packageArea/index'
				})
				// uni.navigateTo({
				// 	url: "/pagesIndex/orderDetails/orderDetails?list=" + JSON.stringify({
				// 		jointName2: item.jointName,
				// 		bottomPrice: item.bottomPrice,
				// 		id: item.id,
				// 		arriveDate: new Date().Format('yyyy-MM-dd'),
				// 		leaveDate: new Date(new Date().setDate(new Date().getDate() + 1)).Format(
				// 			'yyyy-MM-dd'),
				// 		...item
				// 	})
				// })

			},
			//取消订单
			cancelOrder(item) {
				this.$api.get('/api/shipHotel/cancelOrder/' + item.orderCode).then(res => {
					if (res.data.code === 0) {
						this.$showToast('订单已取消');
						this.init();
					} else this.$showModal(res.data.msg)
				})
			},
			//发票/报销
			invoice(item) {
				this.$refs.uToast.show({
					type: 'success',
					title: '',
					message: "正在开发",
					iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/default.png'
				})
			},
			//退票退款
			refundTicket(item) {
				uni.navigateTo({
					url: '/pagesMy/steamerTicketStayOrder/refundTicket?id=' + item.id
				})
			},
			//退款详情
			refundDetails(item) {
				uni.navigateTo({
					url: '/pagesMy/steamerTicketStayOrder/refundDetails?item=' + JSON.stringify({
						orderState: item.orderState,
						price: item.realityPay,
						sxf: 0 //手续费
					})
				})
			},
			//去支付
			toPay(item) {
				this.$api.get('/api/shipHotel/getShipHotelOrderInfo/' + item.id).then(resu => {
					if (resu.data.code === 0) {
						if (resu.data.orderState == 0) {
							this.$api.post('/order/icbc/createOrder', {
								orderCode: item.orderCode,
								tradeType: 'JSAPI',
								openId: JSON.parse(uni.getStorageSync('userInfo')).openId
							}, false).then(res => {
								if (res.statusCode == 200 && res.data != null) {
									this.$wxPay(res.data).then(result => {
										this.$showToast('支付成功');
										this.init();
									})
								}
							})
						}else this.$showToast('不可支付，请稍后刷新列表');
					}else this.$showToast(resu.data.msg)
				})
			},
			toDetails(item) {
				uni.navigateTo({
					url: '/pagesMy/steamerTicketStayOrder/details?orderId=' + item.id
				})
			},
			toEvaluate(item) {
				item.guideId = item.id;
				item.sourceType = 5;
				uni.navigateTo({
					url: '/pagesMy/appraise/appraise?obj=' + JSON.stringify(item)
				})
			},
			finish(item) {
				this.$api.get('/api/shipHotel/cancelOrder/' + item.orderCode).then(res => {
					setTimeout(() => {
						this.init();
					}, 500)
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.orders {
		display: flex;
		flex-direction: column;
		align-items: center;

		&.empty {
			height: 100%;
			justify-content: center;
		}

		::v-deep .u-list-item {
			width: 100%;
			margin-top: 20rpx;
			border-radius: 16rpx;
			background: #fff;
			padding: 36rpx 24rpx 24rpx;
			box-sizing: border-box;

			&:last-child {
				margin-bottom: 40rpx;
			}

			.top {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}

					text {
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #111111;
						line-height: 28rpx;
						margin-left: 20rpx;
					}
				}

				.right {
					text-align: right;
					font-size: 26rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					line-height: 37rpx;
				}
			}

			.content {
				padding: 22rpx 0 24rpx 56rpx;
				border-bottom: 1rpx solid #EFEFEF;
				background: #fff;

				.title {
					font-size: 32rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #333333;
					line-height: 45rpx;
				}

				.date {
					display: flex;
					align-items: center;
					margin-top: 22rpx;

					&>text {
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #AAAAAA;
						line-height: 24rpx;

						&:nth-child(2) {
							margin: 0 10rpx;
						}
					}
				}

				.room_price {
					display: flex;
					justify-content: space-between;
					margin-top: 16rpx;

					.room {
						display: flex;
						align-items: center;

						&>text {
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #AAAAAA;
							line-height: 24rpx;

							&:last-child {
								margin-left: 30rpx;
							}
						}
					}

					.price {
						text {}
					}
				}
			}

			.btns {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				&>view {
					margin: 24rpx 0 0 24rpx;
					width: 148rpx;
					height: 56rpx;
					// border: 1rpx solid #EFEFEF;
					background-color: #F6F6F6;
					border-radius: 16rpx;
					line-height: 56rpx;
					text-align: center;
					font-size: 24rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
			}
		}
	}

	.qx {
		color: #AAAAAA !important;
	}

	.textColor999 {
		color: #999999;
	}

	.textColor333 {
		color: #333333;
	}

	.textColor000 {
		color: #FEB000;
	}
</style>